<template>
  <div>
    <div id="D1head2">
      <div id="D1ranking01">
        
        <router-link to="Fund"><img id="D1ranking1" src="../assets/img/arrows.png" alt="" /> </router-link>  
        
        <h4>排行榜</h4>
        <img id="D1ranking1" src="../assets/img/错号.png" alt="" />
      </div>
      <!-- 热销 -->
      <div class="D1ranking03">
        <div class="D1ranking02">
          <p id="D1published1">热销榜</p>
          <p id="D1published2">定投榜</p>
          <p id="D1published3">人气榜</p>
          <p id="D1published4">精选榜</p>
        </div>
      </div>
    </div>
    <!-- 热销榜 -->
    <div id="D1hot">
      <!-- 图 -->
      <div class="D1print">
        <p class="D1print1">基金定投人气榜</p>
        <p class="D1print2">近3个月销量最高基金</p>
      </div>
      <!-- 全部 -->
      <div class="D1choice2">
        <div class="D1choice">
          <div class="D1choice1" id="D1all111" @click="All">全部</div>
          <div class="D1choice1" id="D1stock1" @click="stock">股票</div>
          <div class="D1choice1" id="D1mixture1" @click="mixture">混合</div>
          <div class="D1choice1" id="D1bond1" @click="bond">债券</div>
          <div class="D1choice1" id="D1currency1" @click="currency">货币</div>
        </div>
      </div>
      <!-- 排行 -->
      <!-- 全部 -->
      <div class="D1all10" id="D1all22">
        <div class="D1all11" @click="information(item.fundNo)" v-for="(item, index) in detailsAll" :key="index">
          <div class="D1all12">
            <!-- <h3>1</h3> -->
            <p>{{ item.fundName | message }}</p>
            <div class="D1data">
              <span class="D1origin">50万+人已购买</span>
              <span class="D1origin">{{risk[item.riskType-1]}}</span>
              <span class="D1grey">{{type[item.invest-1]}}</span>
            </div>
          </div>
          <!-- 三子 -->
          <div class="D1percentum1">
            <h3>{{ item.yearRate }}%</h3>
            <p>近一年涨幅</p>
          </div>
        </div>
      </div>

      <!-- 定期榜 -->
      <div id="D1fix"></div>
      <!-- 人气 -->
      <div id="D1moods"></div>

      <!-- 精选 -->
      <div id="D1handpick"></div>
    </div>
  </div>
</template>

<script>
import { fundranking } from "../api/Ranking";
export default {
  data() {
    return {
      num: "",
      detailsAll: [],
      type: ["股票型","债券型","货币型","混合型"],
      risk: ["低风险","中风险","高风险"],
    };
  },
  methods: {
    information(query1){
            this.$router.push({
                name:"funddetails",
                query:{fundNo:query1}
            })
            console.log(query1);
        },
    All() {
      this.num = "0";
      fundranking({ invest: this.num }).then((res) => {
        if (res.code == 200) {
          this.detailsAll = res.data;
        console.log(this.detailsAll);
        console.log(res.data[1].invest);
        }else{
          Dialog({title: '温馨提示', message: res.mag });
        }
      });
    },
    stock() {
      this.num = "1";
      fundranking({ invest: this.num }).then((res) => {
        if (res.code == 200 ) {
          this.detailsAll = res.data;
        }else{
          Dialog({title: '温馨提示', message: res.mag });
        }
        
      });
    },
    mixture() {
      this.num = "2";
      fundranking({ invest: this.num }).then((res) => {
        if (res.code == 200) {
          this.detailsAll = res.data;
        }else{
          Dialog({title: '温馨提示', message: res.mag });
        }
        
        
      });
    },
    bond() {
      this.num = "3";
      fundranking({ invest: this.num }).then((res) => {
        if (res.code == 200) {
          this.detailsAll = res.data;
        }else{
          Dialog({title: '温馨提示', message: res.mag });
        }
      });
    },
    currency() {
      this.num = "4";
      fundranking({ invest: this.num }).then((res) => {
        if (res.code == 200) {
          this.detailsAll = res.data;
        }else{
          Dialog({title: '温馨提示', message: res.mag });
        }
        
        
      });
    },
  },
  created(){
    this.All()
  },
  // 过滤器
  filters: {
    message(val) {
      if (val.length <= 10) {
        return val;
      }
      return val.slice(0, 10) + "...";
    },
  },
};
</script>

<style scoped src="../assets/css/ranking.css">
</style>